<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 商品状态 操作按钮 搜索 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all">
            <div>
                <router-link to="/shop/goods/create">
                    <el-button type="success">发布商品</el-button>
                </router-link>
                <el-button type="danger" style="margin-left: 12px;">批量删除</el-button>
                <el-button>上架</el-button>
                <el-button>下架</el-button>
            </div>
            <div v-if="show">
                <el-input v-model="searchTitle" placeholder="请输入内容" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info" @click="search">搜索</el-button>
                <el-button @click="show=false">高级搜索</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="审核中" name="checking">
            <div>
                <el-button type="success">发布商品</el-button>
                <el-button type="danger">批量删除</el-button>
            </div>
            <div v-if="show">
                <el-input v-model="searchTitle" placeholder="请输入内容" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info" @click="search">搜索</el-button>
                <el-button @click="show=false">高级搜索</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="出售中" name="saling">
            <div>
                <el-button type="success">发布商品</el-button>
                <el-button type="danger">批量删除</el-button>
                <el-button>下架</el-button>
            </div>
            <div v-if="show">
                <el-input v-model="searchTitle" placeholder="请输入内容" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info" @click="search">搜索</el-button>
                <el-button @click="show=false">高级搜索</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="已下架" name="off">
            <div>
                <el-button type="success">发布商品</el-button>
                <el-button type="danger">批量删除</el-button>
                <el-button>下架</el-button>
            </div>
            <div v-if="show">
                <el-input v-model="searchTitle" placeholder="请输入内容" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info" @click="search">搜索</el-button>
                <el-button @click="show=false">高级搜索</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="库存预警" name="min_stock">
            <div>
                <el-button type="success">发布商品</el-button>
                <el-button type="danger">批量删除</el-button>
            </div>
            <div v-if="show">
                <el-input v-model="searchTitle" placeholder="请输入内容" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info" @click="search">搜索</el-button>
                <el-button @click="show=false">高级搜索</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="回收站" name="delete">
            <div>
                <el-button type="success">发布商品</el-button>
                <el-button type="warning">回复商品</el-button>
                <el-button type="danger">彻底删除</el-button>
            </div>
            <div v-if="show">
                <el-input v-model="searchTitle" placeholder="请输入内容" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info" @click="search">搜索</el-button>
                <el-button @click="show=false">高级搜索</el-button>
            </div>
        </el-tab-pane>
    </el-tabs>

    <!-- 高级搜索卡片 -->
    <el-card class="box-card" style="margin-top: 20px;" v-if="!show">
        <div slot="header" class="clearfix" style="border-bottom: 1px solid #ebeef5; margin-bottom: 10px;">
            <span>高级搜索</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="show=true">收起</el-button>
        </div>
        <el-form ref="form" label-width="80px" >
            <el-form-item label="商品名称">
                <el-input v-model="searchTitle" placeholder="商品名称" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
                <el-select v-model="goodsCates"  placeholder="请选择商品分类">
                    <el-option v-for="item, index in cates" :key="index" :label="item.name" :value="item.id" style="width: 200px;">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-button type="info" @click="search">搜索</el-button>
            <el-button @click="searchTitle='',goodsCates=''">清空筛选条件</el-button>
        </el-form>
    </el-card>

    <!-- 商品表格 -->
    <el-table :data="goodsList" border style="width: 100% ; margin-top: 20px;" ref="multipleTable" tooltip-effect="dark"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="45" align="center">
        </el-table-column>
        <el-table-column label="商品" width="300">
            <template v-slot='scope'>
                <div style="display: flex; align-items: center;">
                    <img :src="scope.row.cover" alt="" style="width: 40px;height: 40px;">
                    <div style="width: 200px; margin-left: 20px;">
                        <p>{{ scope.row.title }}</p>
                        <p>分类：{{ scope.row.desc }}</p>
                        <p>时间：{{ scope.row.create_time }}</p>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="discount" label="实际销量" width="70">
        </el-table-column>
        <el-table-column prop="status" label="商品状态" width="60">
            <template v-slot="scope">
                <span>{{ scope.row.status == '1' ? '上架' : '仓库' }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="status" label="审核状态" width="120">
            <template v-slot="scope">
                <span>{{ scope.row.status == '1' ? '通过' : '拒绝' }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="stock" label="总库存" width="90">
        </el-table-column>
        <el-table-column prop="min_price" label="价格(元)" width="120">
        </el-table-column>
        <el-table-column prop="address" label="操作" width="242">
        </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[1, 2, 5, 10]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
            :total="listnumber">
        </el-pagination>
    </div>
</template>

<script>
import { apiGetGoodsList } from '@/common/api/index'
export default {
    data() {
        return {
            activeName: 'all',
            searchTitle: '',
            checked: true,
            multipleSelection: [],
            goodsList: [],
            limit: 10,
            tab: 'all',
            page: 1,
            listnumber: 0,
            title: '',
            // goodsName: '',
            goodsCates:'',
            cates:[],
            show:true
        };
    },
    methods: {
        handleClick(tab) {
            // console.log(tab.props.name);
            this.tab = tab.props.name
            this.getgoodsList()
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 更改展示条数
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.limit = val
            this.getgoodsList()
        },
        // 切换展示页数
        handleCurrentChange(val) {
            this.page = val
            // console.log(`当前页: ${val}`);
            this.getgoodsList()
        },
        async getgoodsList() {
            const token = this.$store.state.user.token
            let res = await apiGetGoodsList(this.page, this.limit, this.tab, this.searchTitle,this.goodsCates)
            if (res.data.msg == 'ok') {
                this.listnumber = res.data.data.totalCount
                this.cates =  res.data.data.cates
                this.goodsList = res.data.data.list
            }
        },
        // 搜索
        search() {
            this.getgoodsList()
        },
    },
    mounted() {
        this.getgoodsList()
    }
};
</script>

<style scoped>
.el-breadcrumb {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 20px;
}

.el-tab-pane {
    display: flex;
    justify-content: space-between;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

</style>